<template>
  <APlayer v-if="musicPlayer!=null"
           :music.sync="musicPlayer"
           :preload="preload"
           :float="float"
           :mini="mini"
           :autoplay="autoplay"
           :list="musicAudio"
           :listFolded="listFolded"
           :volume="volume"
           :mutex="mutex"
           :theme="theme"
           :showLrc="showLrc"
           :repeat="repeat"
           :listMaxHeight="listMaxHeight"  ref="playerRef"
           @canplay="playMusic"
           :controls="true"
  >
  </APlayer>
</template>
<script setup>

import {storeToRefs} from "pinia";
import useMusicStore from "@/stores/admin/useMusicStore";
import APlayer from "vue3-aplayer";
import {addMusicNum} from "@/api/music/musicApi";
import {addSongListNum} from "@/api/music/songListApi";

const playerRef = ref()
const {
  musicAudio,
  musicPlayer,
  songListId
} = storeToRefs(useMusicStore());
const musicId = ref();
const props = defineProps({
  // 开启浮动模式
  float: {
    type: Boolean,
    default: false
  },
  // 开启迷你模式
  mini: {
    type: Boolean,
    default: false
  },
  showLrc: {
    type: Boolean,
    default: true
  },
  // 互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
  mutex: {
    type: Boolean,
    default: true
  },
  // 主题色
  theme: {
    type: String,
    default: 'rgba(255,255,255,0.2)'
  },
  // 音频自动播放
  autoplay: {
    type: Boolean,
    default: false
  },
  // 预加载
  preload: {
    type: String,
    default: 'auto' //'auto' | 'metadata' | 'none'
  },
  // 默认音量
  volume: {
    type: Number,
    default: 0.5,
    validator: (value) => {
      return value >= 0 && value <= 1;
    }
  },
  // 列表是否默认折叠
  listFolded: {
    type: Boolean,
    default: true
  },
  // 列表最大高度
  listMaxHeight: {
    type: String,
    default: '300px'
  },
  repeat:{
    type:String,
    default:'list'
  }
})

watch(()=>songListId.value,(newId)=>{
  if (newId || newId === 0){
    // 歌单播放次数增加
    addSongListNum(newId,"play")
  }
})
watch(()=>musicId.value,(value)=>{
  onEndedMusic();
})
onMounted(() => {
})
function playMusic(){
  playerRef.value?.play()
  let currentMusic = playerRef.value?.currentMusic;
  musicId.value = currentMusic?.id
}
// function addPlayNum(){
//   // onEndedMusic();
// }

function onEndedMusic(){
  let currentMusic = playerRef.value?.currentMusic;
  // 播放完毕播放次数+1
  if (currentMusic?.id){
    addMusicNum(currentMusic.id,"play")
  }
}
</script>
<style lang='scss'>
.aplayer-author {
  padding-left: 5px;
}


</style>
